<style lang="less" scoped>
.login{
  height: 100vh;
  background: #141A28;
  box-sizing: border-box;
  padding: 92px 40px 20px;
  .register-btn{
    width: 99px;
    height: 55px;
    border: 2px solid #FFF;
    float: right;
    font-size: 26px;
    font-weight: 400;
    line-height: 55px;
  }
  .title{
    font-size: 30px;
    font-weight: 400;
    color: #FFFFFF;
    padding: 77px 0 50px 0;
  }
  .form-row{
    height: 69px;
    margin-bottom: 20px;
    font-size: 24px;
    color: #8791A8;
    display: flex;
    padding: 0 25px;
    align-items: center;
    background: #222836;
    input{
      flex: 1;
      height: 100%;
      background: rgba(0, 0, 0, 0);
    }
    img{
      width: 33px;
    }
    .hidepwd{
      width: 34px;
    }
  }
  .loss-pwd{
    float: right;
    font-size: 24px;
    font-weight: 400;
    color: #FFF;
    margin-top: 28px;
  }
  .loss{
    overflow: hidden;
  }
  .action-btn{
    width: 606px;
    height: 81px;
    background: #FFA22A;
    margin: 54px auto 0;
    text-align: center;
    line-height: 81px;
    font-size: 30px;
    font-weight: 400;
    color: #000;
    margin-bottom: 35px;
  }
  .contract{
    width: 606px;
    margin: 0 auto 28px;
    color: #999;
    font-size: 22px;
    display: flex;
    align-items: center;
    .swhich{
      width: 24px;
      margin-right: 10px;
      height: 24px;
      border: 1px solid #999;
      border-radius: 50%;
      box-sizing: border-box;
      padding: 2px;
      .swhiched{
        height: 100%;
        border-radius: 50%;
        background: #FFA22A;
      }
    }
    span{
      color: #FFA22A
    }
  }
}
</style>

<template>
  <div class="login">
    <top-bar>
      <div class="register-btn" @click="$router.push('/register')">注册</div>
    </top-bar>
    <div class="title">登录</div>
    <div class="form-row">
      <input v-model="state.phone" maxlength="11" minlength="11" type="number" placeholder="请输入手机号">
    </div>
    <div class="form-row">
      <input v-model="state.password" maxlength="20" :type="state.showPassword ? 'text' : 'password'" placeholder="请输入密码">
      <img v-show="state.showPassword" @click="state.showPassword = false" src="../../assets/images/showpsd.png" alt="">
      <img v-show="!state.showPassword" class="hidepwd" @click="state.showPassword = true" src="../../assets/images/hidepsd.png" alt="">
    </div>
    <div class="loss"><span class="loss-pwd" @click="$router.push('/Resetpassword')">忘记密码？</span></div>
    <div class="action-btn" @click="loging">登录</div>
    <div class="contract" @click="state.is18 = !state.is18">
      <div class="swhich">
        <div class="swhiched" v-show="state.is18"></div>
      </div>
      <div>我已满18岁，盲盒娱乐理性消费，切勿上头</div>
    </div>
    <div class="contract" @click="state.isAllow = !state.is18">
      <div class="swhich">
        <div class="swhiched" v-show="state.isAllow"></div>
      </div>
      <div>同意<span>用户协议</span>及<span>隐私协议</span></div>
    </div>
  </div>
</template>

<script>
import { reactive } from "vue";
import { Toast  } from 'vant'
import { useRouter } from 'vue-router'
import { login } from '../../api/home.js'
import { useStore } from 'vuex'
export default {
  setup() {
    const store = useStore()
    const router = useRouter()
    const state = reactive({
      showPassword: false,
      phone: '',
      password: '',
      is18: true,
      isAllow: true
    })
    const loging = async () => {
      if (!state.phone) {
        Toast.fail('请输入手机号')
        return false
      }
      if (!state.password) {
        Toast.fail('请输入密码')
        return false
      }
      if (!state.is18) {
        Toast.fail('请确认年龄')
        return false
      }
      if (!state.isAllow) {
        Toast.fail('请确认协议')
        return false
      }
      const res = await login({
        mobile: state.phone,
        passWord: state.password
      })
      if (res.code === 200) {
        store.commit('login', res.data)
        try {
          router.go(-1)
        } catch {
          router.push({
            path: '/'
          })
        }
      } else {
        Toast.fail(res.msg)
      }
    }
    return {
      loging,
      state,
      router
    }
  }
}
</script>